<template>
  <div class="phone5">
    <div ref="chartContainerphone5" style="width: 100%;height: 300px"></div>
  </div>
  <a-modal :title="state.popupTitle" v-model:visible="state.popVisible2" :footer="false" fullscreen>
    <table class="mytable">
      <tr>
        <th style="width: 30%">日期</th>
        <th style="width: 30%">严重程度</th>
        <th>安全问题编号</th>
      </tr>
      <tr>
        <td>2024-03-03</td>
        <td>一般问题</td>
        <td>安-20240302</td>
      </tr>
      <tr>
        <td>2024-03-13</td>
        <td>一般问题</td>
        <td>安-20240309</td>
      </tr>
      <tr>
        <td>2024-03-19</td>
        <td>严重问题</td>
        <td>安-20240312</td>
      </tr>
    </table>
    <div style="text-align: center;margin-top: 5px">
      <a-button size="small" type="warning" @click="closePop">
        <template #icon><icon-close-circle /></template>关闭
      </a-button>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
  popVisible2:false,
  popupTitle : '',
})

const chartContainerphone5 = ref(null);
const createCharts = ()=>{
  const chartInstance = echarts.init(chartContainerphone5.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月安全生产统计',
      left:'10px',
      textStyle:{
        color:'#0048ff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'axis',
      triggerOn:'click',
      axisPointer: {
        type: 'shadow'
      },
      //formatter: '{b0}: {c0}次',
    },
    legend: {
      selectedMode: true,
      data:['一般问题', '严重问题'],
      top:'5px',
      right:'5px',
      textStyle:{
        color:'#00fbea'
      }
    },
    grid: {
      left: '16px',
      top:'50px',
      right: '10px',
      bottom: '10px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      axisLine: {   //x轴的样式
        show: false,
        lineStyle: {
          color: "#ffffff",
          width: 1,
          type: "solid"
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        rotate:40,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#4271e8",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {   //y轴的样式
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        show:false,
        formatter: '{value}次',
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [{
      name: '一般问题',
      type: 'bar',
      stack: 'total',
      barWidth:'40%', //柱子宽度
      itemStyle: {
        normal: {
          //color:'#2f89cf',
          color:'#f1c104',
          opacity: 1,
          barBorderRadius: 5,
        }
      },
      label: {
        show: true, // 显示数值
        color:"#ffffff",
        formatter:function (param){
          if(param&&param.data>0){
            return param.data + '次'
          }else{
            return "";
          }
        },
        position: 'inside' // 在顶部显示
      },
      data: [2, 3, 2, 1, 4, 3, 2]
    },{
      name: '严重问题',
      type: 'bar',
      stack: 'total',
      barWidth:'40%', //柱子宽度
      itemStyle: {
        normal: {
          //color:'#2f89cf',
          color:'#f10631',
          opacity: 1,
          barBorderRadius: 5,
        }
      },
      label: {
        show: true, // 显示数值
        color:"#ffffff",
        formatter:function (param){
          if(param&&param.data>0){
            return param.data + '次'
          }else{
            return "";
          }
        },
        position: 'inside' // 在顶部显示
      },
      data: [1, 0, 1, 1, 1, 0, 1]
    }]
  };
  chartInstance.setOption(option);

  chartInstance.on('click',function (param){
    state.popupTitle = param.name + '安全生产情况'
    state.popVisible2 = true
  })
}

const closePop = ()=>{
  state.popVisible2 = false
}
onMounted(()=>{
  createCharts();
})

</script>

<style scoped lang="less">
.phone5{
  padding-top: 5px;
  border: 1px solid #32a99e;
}
</style>
